<template>
	<view class="fixed">
		<view class="cartinfo" v-show="show">
			<view class="enter">
				<!-- {{skuList}} -->
				<view class="header">
					<view class="left">
						<image :src="list.cover_img" mode=""></image>
					</view>
					<view class="middle">
						<text class="gname">{{ list.gname }}</text>
						<text class="count">库存数量{{ cardUseInfo.count }}</text>

					</view>
					<view class="right">
						<image @tap="closecard" src="../../assets/images/x.png" mode=""></image>
					</view>
				</view>

				<view class="colortext">
					<text>颜色分类</text>
					<view class="color" @click="initCartUseInfo(item.id)" v-for="item in cardUseInfo.colorList" :key="item.id">
						{{ item.color_text }}
					</view>
				</view>

				<view class="service">
					<text>特色服务</text>
					<view class="first">
						送货上门
					</view>
					<view class="second">
						上门安装
					</view>
				</view>

				<view class="addcount">
					<view class="left">
						购买数量
					</view>
					<view class="right">
						<fx-number-box @change="bindChange"></fx-number-box>
					</view>
				</view>
				<view class="button" @tap="addCart">
					确认
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	import http from "@/utils/http.js"
	import fxNumberBox from '@/components/fx-number-box/fx-number-box.vue';
	export default {
		props: ["skuList","list","id"],
		components: {
			fxNumberBox
		},
		data() {
			return {
				show: false,
				nums: '', //最小为1，最大上限为库存数量skuList.count
				cardUseInfo: {}, // 卡片需要用的对象
				buyType: '' , // 购买类型： 0 购物车 ； 1  直接购买
				userId:'', // 用户id
				
			}
		},
		methods: {
			openCard(buyType){
				this.buyType = buyType;
				this.show = true;
				// 渲染卡片
				this.initCartUseInfo()
			},
			closecard() {
				this.show = false;
			},
			
			bindChange(value) {
				console.log(value);
				this.nums = value;
			},
			initCartUseInfo(id){
				var currentSuk = {};
				if(id){
					// 根据id获取相关sku 并替换
					currentSuk = this.skuList.find(item =>item.id == id);
				}else{
					// 没有id 则默认取第一个
					currentSuk = this.skuList[0]
				}
				
				this.cardUseInfo = {
					img: currentSuk.img,
					count: currentSuk.count ,
					colorList:[],
					buyCount: 0,
				}	
				for(var i = 0 ;i < this.skuList.length ; i++){
					this.cardUseInfo.colorList.push({
						id: this.skuList[i].id,
						'color_text':this.skuList[i].color_text,
						'color': this.skuList[i].color,
						'count':this.skuList[i].count,
					})
				}
				// if(this.color = []){
				// 	this.color = this.skulist[0].
				// }
			},
			// addCart() {
			// 	// 添加购物车
			// 	if (this.buyType == '0') {
			// 		var shop = {
			// 			skuCode: this.skuList.sku_code,
			// 			gname: this.list.gname,
			// 			coverImg: this.list.cover_img,
			// 			color_text: this.skuList.color_text,
			// 			skuId: this.skuList[0].id,
			// 			price: this.skuList[0].price,
			// 			// 最小为1，最大上限为库存数量skuList.count
			// 			count: this.skuList[0].count
			// 		};
			// 		// 从本地缓存中同步获取指定 key 对应的内容buycart。
			// 		var buycart = uni.getStorageSync('leju-buycart');
			// 		console.log(this.buycart);
			// 		if (!buycart) { // 如果有，直接存储shop，如果没有，则push（shop)之后，再存入
			// 			// 将 [shop] 存储在本地缓存中指定的 leju-buycart 中，会覆盖掉原来该 leju-buycart 对应的内容，这是一个同步接口。
			// 			uni.setStorageSync('leju-buycart', [shop]);
			// 		} else { //没有获取到leju-buycart对应的数据，就需要进行添加操作
			// 			console.log(shop);
			// 			if (shop.count == 0) {
			// 				uni.showToast({
			// 					title: "数量为空,不能添加",
			// 					icon: 'none'
			// 				})
			// 				return
			// 			} else if (shop.count > this.skuList[0].count) {
			// 				uni.showToast({
			// 					title: "数量超过库存,不能添加",
			// 					icon: 'none'
			// 				})
			// 				return
			// 			} else {
			// 				// 添加操作
			// 				buycart.push(shop)
			// 				uni.setStorageSync('leju-buycart', buycart);
			// 			}
			// 		}

			// 		uni.showToast({
			// 			title: '添加购物车成功',
			// 			duration: 2000
			// 		});

			// 	} else {
			// 		uni.navigateTo({
			// 			url: "/pages/kind/notPay/notPay"
			// 		})
			// 	}
			// }
			addCart() {
				if(this.buyType == 0){
					console.log(uni.getStorageSync('token'))
					var userinfo = JSON.parse(uni.getStorageSync('token'));
					this.userId = userinfo.id;
					console.log(this.userId);
					if(this.nums == 0){
						uni.showToast({
							title: '数量为空不能添加',
							duration: 2000,
							icon:'none'
						})
						return
					}
					else if(this.nums > this.cardUseInfo.colorList.count){
						uni.showToast({
							title: '超过库存,不能添加',
							duration: 2000,
							icon:'none'
						})
					}
					// var skuId = this.cardUseInfo.colorList.find(item => item.id);
					// if(this.cardUseInfo.colorList = []){
					// 	this.cardUseInfo.colorList = this.skuList[0].
					// }
					// var skuId = [],
					//  this.cardUseInfo.colorList.forEach(item => 
					// 		{skuId.push(item.id)};	 
					//  );
					console.log('提交信息：',this.cardUseInfo)
					
					http.post("/api/leju/front/cart/addCart",{
						skuId:this.cardUseInfo.colorList[0].id,
						count:this.nums,
						userId:this.userId
					}).then(res => {
						if(res == "success"){
							uni.showToast({
								title: '添加购物车成功',
								duration: 2000
							})
						}else{
							uni.showToast({
								title: '添加购物车失败',
								duration: 2000,
								icon:'none'
							})
						}
					})
				}else{
					console.log("立即购买");
						uni.navigateTo({
							url:'/pages/kind/notPay/notPay'
						})
					}
					
				}
				
			},
			created() {
				
			}
		}
		
	
</script>

<style lang="scss">
	.fixed {
		position: fixed;
		left: 0;
		top: 0;

		.cartinfo {
			width: 750rpx;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: gray;

			.enter {
				width: 628rpx;
				height: 924rpx;
				background-color: #FFFFFF;
				border-radius: 40rpx;
				opacity: 1.0;

				.header {
					width: 100%;
					height: 136rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					margin-bottom: 54rpx;

					.left {
						width: 192rpx;
						height: 192rpx;
						margin-top: -56rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.middle {
						width: 223rpx;
						height: 80rpx;

						text {
							display: block;
						}

						.gname {
							font-size: 28rpx;
							color: #3E3E3E;
							letter-spacing: 2rpx;
							font-weight: bolder;
							margin-bottom: 6rpx;
						}

						.count {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #B0B0B0;
							letter-spacing: 1.71rpx;
						}
					}

					.right {
						width: 42rpx;
						height: 42rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.colortext {
					width: 500rpx;
					margin-left: 50rpx;
					margin-bottom: 50rpx;

					text {
						display: block;
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #3E3E3E;
						letter-spacing: 2rpx;
						margin-left: 20rpx;
						font-weight: bolder;
					}

					.color {
						width: 242rpx;
						height: 60rpx;
						margin-top: 16rpx;
						// opacity: 0.06;
						background: #354E44;
						border-radius: 10rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						color: white;
						letter-spacing: 1.86px;
					}
				}

				.service {
					width: 500rpx;
					margin-left: 50rpx;

					text {
						display: block;
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #3E3E3E;
						letter-spacing: 2rpx;
						margin-left: 20rpx;
						font-weight: bolder;
					}

					.first {
						width: 380rpx;
						height: 60rpx;
						margin-top: 16rpx;
						// opacity: 0.06;
						background: #354E44;
						border-radius: 10rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						color: white;
						letter-spacing: 1.86px;
					}

					.second {
						width: 380rpx;
						height: 60rpx;
						margin-top: 16rpx;
						// opacity: 0.06;
						background: #354E44;
						border-radius: 10rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						color: white;
						letter-spacing: 1.86rpx;
					}
				}

				.addcount {
					width: 100%;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 40rpx auto 40rpx;
					border: 2rpx solid #979797;

					.left {
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #3E3E3E;
						letter-spacing: 2rpx;
						margin-left: 20rpx;
						font-weight: bolder;
						margin-left: 50rpx;
					}

					.right {
						width: 120rpx;
						height: 40rpx;
						margin-right: 150rpx;
					}
				}

				.button {
					width: 208rpx;
					height: 88rpx;
					background: #354E44;
					border-radius: 14px;
					margin: 0 auto;
					font-family: PingFangSC-Semibold;
					font-size: 32rpx;
					color: #FFFFFF;
					letter-spacing: 2.29rpx;
					line-height: 88rpx;
					text-align: center;
					font-weight: bolder;
				}
			}

		}
	}
</style>
